import React from 'react'
import { Form,Button,Tag,Modal} from 'antd';
const FormItem = Form.Item;
import StateMixin from 'reflux-state-mixin';
import SrvListStore from 'pages/servicelist/stores/serviceListStore.js'
import ItemChoose from 'pages/servicelist/itemsChoose.jsx'

let ItemInfoForm = React.createClass({
  mixins: [StateMixin.connect(SrvListStore)],
  getInitialState() {
    return {
      selectItemChooseVisible: false,
      addAuthedUserVisible: false
    };
  },
  selectItemOk(data) {
    this.setState({
      selectedRows:data,
      selectItemChooseVisible: false
    })
  },
  selectItemCancel() {
    this.setState({
      selectItemChooseVisible: false
    })
  },
  componentWillUnmount() {
    // ModelAction.clearModel();
  },
  handleDelItem() {
    this.setState({
      selectedRows:[]
    })
  },
  handleAddItem() {
    this.setState({
      selectItemChooseVisible: true
    })
  },
  render() {
    const formItemLayout = {
      labelCol: {
        span: 2
      },
      wrapperCol: {
        span: 12
      }
    };

    const {getFieldProps} = this.props.form;
    const srvItemsProps = getFieldProps('srvItems', {
      initialValue: this.state.selectedRows,
      getValueFromEvent: function(data) {
        return data;
      }
    })
    return (
      <div className="model-form-section basic-info">
        <h3>
          <strong>包含的服务项</strong>
        </h3>
        <Form horizontal>
         <div className="itemaction">
          <Button type="primary" onClick={this.handleDelItem}>
            全部删除
          </Button>
          <Button type="primary" icon="plus" onClick={this.handleAddItem}>
            添加服务项
          </Button>
        </div>
          <FormItem {...formItemLayout} label="" hasFeedback>  
            <div className='tags-list'>
              { _.map(this.state.selectedRows, (items, index) => {
                return (
                  <Tag closable key={ index }>
                    { items.name }
                  </Tag>
                )
              }) }
            </div>
          </FormItem>

        <Modal visible={ this.state.selectItemChooseVisible }
          onOk={ this.selectItemOk } onCancel={ this.selectItemCancel }
          width={ 800 } footer={ '' } className="mymodelstyle">
          <ItemChoose visible={ this.state.selectItemChooseVisible }
            title="服务项选择" {...srvItemsProps}
            onOk={ this.selectItemOk } onCancel={ this.selectItemCancel }
            data={ this.state.srvItems } />
        </Modal>
        </Form>
      </div>
    );
  }
});

export default Form.create()(ItemInfoForm);
